<template>
  <a-page-header
    style="border: 1px solid rgb(235, 237, 240)"
    title="日报生成器"
    sub-title="this is a 日报生成器"
  />
  <div class="w-full flex justify-center mt-10">
    <div class="w-3/5 flex justify-between">
      <div class="flex-1 mr-5 min-w-[300px]">
        <a-divider orientation="left">填写信息</a-divider>
        <a-form>
          <a-form-item label="显示日期">
            <a-switch v-model:checked="options.date"></a-switch>
          </a-form-item>
          <a-form-item label="插入语句">
            <a-button @click="addHuaWater" type="primary">插入一句划水的话</a-button>
          </a-form-item>
          <a-form-item label="插入语句">
            <a-button @click="dialog.open()">插入自定义语句</a-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="w-[460px]">
        <template v-if="result.list.length">
          <a-divider orientation="left">调整顺序(拖拽排序)</a-divider>
          <draggable
            v-model="result.list"
            animation="300"
            group="people"
            @sort="result.render()"
            item-key="id">
            <template #item="{element, index}">
              <div class="h-11 border border-gray-300 mb-3 rounded-sm flex items-center pl-4 cursor-pointer">
                <div class="text-gray-800 w-[80px]">{{element.label}}</div>
                <div class="ml-5 text-xs w-[280px] overflow-hidden">{{element.value}}</div>
                <div class="px-[10px] py-1 bg-[green] text-white rounded" v-if="element.disabled !== true" @click="result.dropKey(index)">删除</div>
              </div>
            </template>
          </draggable>
        </template>
        <a-divider orientation="left">生成结果</a-divider>
        <a-textarea :rows="4" readonly v-model:value="result.text" class="textarea"></a-textarea>
        <div class="flex mt-2.5">
          <a-button class="flex-1 mr-2" type="primary" @click="result.copy">一键复制 Copy</a-button>
          <a-button class="w-[200px]" @click="jumpGit">看源码或者点个Star (Gitee)</a-button>
        </div>
      </div>
    </div>
  </div>
  <div class="flex justify-center mt-20 text-gray-600">sudden3@foxmail.com & 咕噜咕噜</div>
  <a-modal v-model:visible="dialog.show" title="插入自定义语句 - Modal" @ok="dialog.ok">
    <a-form>
      <a-form-item label="前缀">
        <a-select
          ref="select"
          v-model:value="dialog.prefix"
          style="width: 120px"
          @change="dialog.focus"
          allowClear
        >
          <a-select-option v-for="(item, key) in dialog.prefixList" :key="item" :value="item">
            {{item}}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="内容">
        <a-input ref="inputRef" v-model:value="dialog.input"></a-input>
      </a-form-item>
      <a-form-item label="结尾">
        <a-select
          ref="select"
          v-model:value="dialog.after"
          style="width: 120px"
          allowClear
        >
          <a-select-option v-for="(item, key) in dialog.afterList" :key="item" :value="item">
            {{item}}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import draggable from 'vuedraggable'
import {createVNode, onMounted, reactive, ref, watch} from 'vue'
import dayjs from 'dayjs'
import {message, Modal} from 'ant-design-vue'

//生成从minNum到maxNum的随机数
function randomNum(minNum, maxNum){
  switch(arguments.length){
    case 1:
      return parseInt(Math.random() * minNum + 1,10)
    case 2:
      return parseInt(Math.random() * (maxNum - minNum + 1) + minNum,10)
    default:
      return 0;
  }
}

function jumpGit() {
  window.open('https://gitee.com/sudden3/create-daily')
}

let status = reactive({
  position: '前端'
})

onMounted(() => {
  Modal.confirm({
    title: '你是前端还是后端?',
    okText: '前端',
    cancelText: '后端',
    onOk() {
      status.position = '前端'
    },
    onCancel() {
      status.position = '后端'
    }
  });

})

const inputRef = ref()

const dialog = reactive({
  show: false,
  prefix: '',
  input: '',
  after: '',
  prefixList: [
    '完成了',
    '提高了',
    '降低了',
    '优化了',
    '讨论了',
    '梳理了',
    '对接了',
    '添加了',
    '设计了',
    '新增了',
    '新建了',
    '修复了',
    '排查了',
    '修改了',
    '改进了',
    '完善了',
    '应用了',
    '删除了',
    '去掉了',
    '关闭了',
  ],
  afterList: [
    '功能的编写',
    '需求的编写',
    '产品的优化',
    '产品的需求',
    'BUG的修复',
    '测试的要求',
    '问题的解决',
    '的接口问题',
    '的访问延迟',
    '的体验',
    '的速度',
    '的问题',
    '的BUG',
    '的漏洞',
    '的部署',
    '的数量',
    '的逻辑'
  ],
  ok() {
    result.add('自定义语句', (dialog.prefix ?? '') + dialog.input + (dialog.after ?? ''))
    dialog.show = false
  },
  focus() {
    inputRef.value.focus()
    console.log(dialog.prefix)
  },
  open() {
    dialog.prefix = ''
    dialog.input = ''
    dialog.after = ''
    dialog.show = true
  }
})

const addHuaWater = () => {
  let huaWater = [
    '修复常规BUG',
    '配合同事调试项目以完成新版本发布',
  ]
  if (status.position === '前端') {
    huaWater.push(...[
      '优化了页面打开速度',
      '修复console栏报错',
      '优化了页面动画流畅度',
      '优化用户体验',
      '配合后端和测试人员修改产品需求'
    ])
  } else {
    huaWater.push(...[
      '优化了接口访问速度',
      '修复了SQL查询BUG',
      '提升SQL语句的查询速度',
      '配合前端和测试人员修改了产品的需求',
      '修改数据表字段使其更合理了'
    ])
  }
  let filter = result.list.filter(item => {
    return item.label === '划水的话'
  })
  if (filter.length < huaWater.length) {
    let next = true
    while(next) {
      let i = randomNum(0, huaWater.length - 1)
      let find = filter.find(item => {
        return item.value === huaWater[i]
      })
      if (!find) {
        next = false
        result.add('划水的话', huaWater[i])
      }
    }
  } else {
    message.warning('预设的【划水的话】已经全部用完，本次生成会产生重复数据')
    let i = randomNum(0, huaWater.length - 1)
    result.add('划水的话', huaWater[i])
  }
}

const result = reactive({
  text: '',
  list: [],
  copy() {
    if (result.text.length === 0) {
      return message.success('成功复制了个寂寞')
    }
    let dom = document.querySelector('.textarea')
    dom.select()
    document.execCommand('copy')
    message.success('已复制到剪贴板')
  },
  add(label, value = null, disabled = false, first = false) {
    if (first) {
      result.list.unshift({
        label,
        value,
        disabled
      })
    } else {
      result.list.push({
        label,
        value,
        disabled
      })
    }
    result.render()
  },
  addOnly(label, value = null, disabled = false, first = false) {
    result.dropLabel(label)
    result.add(label, value, disabled, first)
  },
  dropLabel(label) {
    let index = result.list.findIndex(item => {
      return item.label === label
    })
    if (index !== -1) {
      result.list.splice(index, 1)
      result.dropLabel(label)
    }
    result.render()
  },
  dropKey(key) {
    result.list.splice(key, 1)
    result.render()
  },
  render() {
    let realHuaWater = []
    const resultTextArray = {
      '日期': () => {
        return dayjs().format('M月D日')
      },
      '划水的话': (value) => {
        return value
      },
      '自定义语句': (value) => {
        return value
      }
    }
    let text = ''
    for (let i = 0; i < result.list.length; i ++) {
      let item = result.list[i]
      text += resultTextArray[item.label](item.value)
      if (i < result.list.length - 1) {
        text += '，'
      }
    }
    result.text = text
  }
})

const options = reactive({
  date: true
})

watch(() => options, () => {
  if (options.date) {
    result.addOnly('日期', null, true, true)
  } else {
    result.dropLabel('日期')
  }
}, {deep:true, immediate: true})
</script>